﻿<pages:BasePage
    x:Class="TheVerge.Phone.Pages.ArticlesPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:con="clr-namespace:TheVerge.Phone.Controls"
    xmlns:pages="clr-namespace:TheVerge.Phone.Pages"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">

    <Grid x:Name="articlesRoot" Background="{StaticResource PhoneBackgroundBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Background="Black">
            <Image Height="44" Stretch="Uniform" Source="/Images/TheVerge_DarkBackground.png" />
        </Border>
        <Rectangle x:Name="rect" Grid.Row="1" Fill="{StaticResource PhoneBackgroundBrush}" />

        <con:InfiniteScroller Grid.Row="1" Margin="12,0">
            <con:InfiniteScroller.ItemTemplate>
                <DataTemplate>
                    <Border BorderBrush="{StaticResource PhoneSubtleBrush}" BorderThickness="0,0,0,1" Padding="2">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" MaxHeight="70" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Text="{Binding Label}" Foreground="{StaticResource PhoneAccentBrush}" Grid.ColumnSpan="2" />

                            <Polygon Grid.Column="2" Grid.RowSpan="2" Fill="{StaticResource PhoneContrastBackgroundBrush}" Margin="0,28,6,0">
                                <Polygon.Points>
                                    <Point X="14" Y="0" />
                                    <Point X="10" Y="10" />
                                    <Point X="26" Y="0" />
                                </Polygon.Points>
                            </Polygon>

                            <Border Background="{StaticResource PhoneContrastBackgroundBrush}" x:Name="tb"
                            HorizontalAlignment="Right"
                            Grid.Column="1" Grid.ColumnSpan="2" Margin="2">
                                <TextBlock Text="{Binding NumberOfComments, StringFormat=' {0} '}" Foreground="{StaticResource PhoneContrastForegroundBrush}" />
                            </Border>

                            <Image Source="{Binding SmallImageUri}" Height="66" Width="66" Grid.Row="1" />

                            <TextBlock Text="{Binding Title}" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" Margin="{StaticResource PhoneHorizontalMargin}"
                               Style="{StaticResource PhoneTextTitle3Style}" TextWrapping="Wrap" />

                            <StackPanel Orientation="Horizontal" Grid.Column="1" Grid.Row="2" VerticalAlignment="Top" Margin="{StaticResource PhoneHorizontalMargin}">
                                <StackPanel.Resources>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource PhoneTextSubtleStyle}">
                                        <Setter Property="Margin" Value="0" />
                                        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeSmall}" />
                                    </Style>
                                </StackPanel.Resources>
                                <TextBlock Text="{Binding AuthorName}" />
                                <TextBlock Text=" | " />
                                <TextBlock Text="{Binding PublishedOn, Converter={StaticResource fnconv}}" />
                            </StackPanel>

                            <Button Click="Article_Click" Background="Transparent" Style="{StaticResource clearButtonStyle}" Grid.RowSpan="3" Grid.ColumnSpan="3" />
                        </Grid>
                    </Border>
                </DataTemplate>
            </con:InfiniteScroller.ItemTemplate>
        </con:InfiniteScroller>

        <con:ArticleEntryControl x:Name="aec" Grid.RowSpan="2" />
    </Grid>
</pages:BasePage>